<template>
  <div class="hm-time">
    <h3 class="title">工作日历</h3>

    <div class="select">
      <!-- 后端或者产品给你一个时间,你要取的是这个时间的年的前后8年 -->
      <el-select v-model="year" @change="changeEvent">
        <el-option
          v-for="(item, index) in yearOptions"
          :key="index"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
      <el-select v-model="month" @change="changeEvent"
        >>
        <el-option
          v-for="item in 12"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
    </div>
    <el-calendar class="calendar" v-model="calendarValue">
      <!-- calendar
       v-model:时间
       自定义内容(使用它的具名插槽)
         v-slot:名字="值"         
     -->
      <template #dateCell="{date}">
        {{ date.getDate() }}
        <span v-if="showRest(date)">休</span>
        <!-- <button @click="btnClick(date, data)">点我看数据</button> -->
      </template>
    </el-calendar>
  </div>
</template>
<script>
export default {
  props: {
    localTime: {
      type: Date,
      default: () => new Date()
      // default默认设置:原始值直接写,引用值function return 一个引用值
    }
  },
  /*
  watch:侦听器
     可以理解就是某个值的change事件
     它可以侦听原始值与引用值
     默认只侦听栈的变化(原始值就是侦听值的改变,引用值就是侦听引用地址的改变)
     如果想侦听引用值内堆的变化 ,需要加  deep:true
     如果想第一次绑定侦听就触发  需要加  immediate:true
  
  */

  watch: {
    // localTime(newVal,oldVal){},
    localTime: {
      handler (newVal) {
        this.calendarValue = newVal
        let _year = newVal.getFullYear()
        this.month = newVal.getMonth() + 1
        let _max = _year + 8
        let _min = _year - 8
        this.yearOptions = []
        this.year = _year
        for (let i = _min; i <= _max; i++) {
          this.yearOptions.push(i)
        }
      },
      immediate: true
    }
  },
  data () {
    return {
      calendarValue: new Date(),
      month: '',
      year: '2021',
      yearOptions: []
    }
  },
  methods: {
    btnClick (date, data) {
      window.console.log(date, data)
    },
    showRest (time) {
      let _month = time.getMonth() + 1
      return (
        this.month === _month && (time.getDay() === 6 || time.getDay() === 0)
      )
    },
    // 年与月改变时触发
    changeEvent () {
      this.calendarValue = new Date(`${this.year}/${this.month}/01`)
    }
  }
}
</script>
<style lang="scss" scoped>
.hm-time {
  .title {
    font-size: 24px;
    font-weight: 550;
  }
  .select {
    text-align: right;
  }
  .calendar {
    ::v-deep .el-calendar__header {
      display: none;
    }
    ::v-deep td {
      border: none !important;
    }
    ::v-deep .el-calendar-day {
      height: 50px;
    }
  }
}
</style>
